<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>
                    大纲管理
                    <el-button type="text" @click="$router.push({ name: 'OutlinesAdd' })">
                        添加
                    </el-button>
                </div>
            </template>
            <el-tree :data="outlines" :props="{ label: 'outlinename', children: 'children' }">
                <template #default="{ data,node }">
                    <div>
                        <span>{{ data.outlinename }}</span>
                        <!-- .stop 阻止冒泡 -->
                        <el-button 
                            type="text" 
                            @click.stop="$router.push({ name: 'OutlinesAdd', 
                            query: { id: data._id } })"
                        >
                            添加子节点
                        </el-button>
                        <!-- v-if 判断如果没有子节点，子节点长度为0就显示删除 -->
                        <el-button 
                            type="text" 
                            @click="$router.push({name:'OutlinesEdit',params:{id:data._id}})"
                        >
                            编辑
                        </el-button>
                        <el-button 
                            v-if="data.children.length === 0" 
                            type="text" 
                            @click.stop="deleteOutlineLoging(data._id)"
                        >
                            删除
                        </el-button>
                        <!-- 排序 -->
                        <el-button 
                            v-if="node.previousSibling"
                            icon="el-icon-arrow-up"
                            type="text"
                            @click.stop="sort(data._id,node.previousSibling.data._id)"
                        >
                        </el-button>
                        <el-button 
                            v-if="node.nextSibling"
                            icon="el-icon-arrow-down"
                            type="text" 
                            @click.stop="sort(data._id,node.nextSibling.data._id)"
                        >
                        </el-button>
                    </div>
                </template>
            </el-tree>

        </el-card>
    </div>
</template>
<script>
import { sortOutline } from "../../api/outlines";
import { mapActions } from "vuex";
export default {
    data() {
        return {
            loading: false,
            outlines: [],
        };
    },
    async created() {
        await this.getOutlinesLoading();
    },
    methods: {
        ...mapActions("outlines", ["getOutlines","deleteOutline"]),
        async sort(id1,id2){
            await sortOutline(id1,id2).catch(()=>{});
            this.getOutlinesLoading();
        },

        // 通过id删除
        async deleteOutlineLoging(id) {
            try {
                await this.$confirm('确定删除吗？','提示')
                this.loading = true;
                await this.deleteOutline(id);
                await this.getOutlinesLoading();
            } catch (error) { 
                this.loading = false;
            }
            this.loading = false;
        },

        // 获取大纲列表
        async getOutlinesLoading() {
            this.loading = true;
            try {
                const { data } = await this.getOutlines();
                this.outlines = data;
            } catch (error) { }
            this.loading = false;
        }
    },
}
</script>